<template lang="html">
  <div>
    <div class="search">
        <div class="input">
          <p><label>反馈用户手机号：</label><el-input placeholder="请输入内容" label="条件" v-model="pageData.name"></el-input></p>
            <p>
              <label>反馈类别：</label>
              <el-select v-model="pageData.type" placeholder="请选择">
                <el-option value="">请选择</el-option>
                 <el-option
                   v-for="item in options"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
                 </el-option>
               </el-select>
            </p>
            <p><el-button type="primary" class="se" style="margin-left:10px;" @click="search">搜索</el-button></p>
        </div>
    </div>
    <tableVue :list="list" :state="false" v-loading="pageData.loading" :total="total" @sizeChange="handSize">
        <slot>
          <el-table-column label="截图" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  v-if="scope.row.picture !== ''"
                  type='primary'
                  @click="screenshots(scope.row)">查看截图
                </el-button>
                <span v-if="scope.row.picture == ''">暂无图片</span>
              </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type='primary'
                  v-if="scope.row.feedbackStatus == '用户已提交,待处理'"
                  @click="details(scope.row)">处理
                </el-button>
              </template>
          </el-table-column>

        </slot>
    </tableVue>
      <dialogVue title="操作" :dialog="screenshot" @close="changeData" :state="false">
            <slot>
                  <p class="imglist" v-for="(item,key) in arrImg">
                    <a :href="item" target="_blank">
                       <img :src="item" alt="">
                    </a>
                  </p>
            </slot>
      </dialogVue>
      <dialogVue title="操作" :dialog="dialog" @close="changeData" :state="false">
        <slot>
            <el-form :model="handleData"  ref="ruleForm" label-width="200px" class="demo-ruleForm">
              <el-form-item label="处理详情">
                  <el-input v-model="handleData.handleDetail" type="textarea" placeholder="请输入内容"></el-input>
               </el-form-item>
               <el-form-item label="通知用户" prop="authStatus">
                 <el-select v-model="handleData.isNotify" placeholder="请选择">
                     <el-option value="">请选择</el-option>
                      <el-option
                        v-for="item in Notify"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="反馈状态" prop="authStatus">
                  <el-select v-model="handleData.feedbackStatus" placeholder="请选择">
                      <el-option value="">请选择</el-option>
                       <el-option
                         v-for="item in Status"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
                       </el-option>
                   </el-select>
                 </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="handleData.remark" placeholder="请输入内容"></el-input>
                 </el-form-item>
                 <el-form-item class="confirm">
                    <el-button type="primary" @click="submitForm">提交</el-button>
                 </el-form-item>
            </el-form>
        </slot>
      </dialogVue>
  </div>
</template>

<script>
  import Data from './index.js'
  import dialogVue from '@/components/dialog.vue'
  import tableVue from '@/components/alltable.vue'
  import {
    feedbackList,
    handlefeedback
  } from "@/api/userCenter/feedback";
  export default {
    components : {
      tableVue,
      dialogVue
    },
     data () {
       return JSON.parse(JSON.stringify(Data))
     },
     mounted () {
       var data = {
         current : '1',
         size : '10'
       }
       this.getfeedbackList(data);
     },
     methods : {
       getfeedbackList (data) {
           this.pageData.loading = true;
         feedbackList(data).then(res=>{
            if (res.data.code == 'OK') {
                  this.pageData.loading = false;
              this.total = res.data.data.total;
               this.list.tbody = res.data.data.records.map(item=>{
                 switch (item.feedbackType) {
                   case '1': item.feedbackType = '应用故障'
                   break;
                   case '2': item.feedbackType = '寄卖问题'
                   break;
                   case '3': item.feedbackType = '商品问题'
                   break;
                   case '4': item.feedbackType = '物流问题'
                   break;
                   case '5': item.feedbackType = '赎回问题'
                   break;
                   case '6': item.feedbackType = '订单问题'
                   break;
                   case '7': item.feedbackType = '其他'
                   break;
                   default:
                 }
                 switch (item.feedbackStatus) {
                   case '1001':item.feedbackStatus = '用户已提交,待处理'
                   break;
                   case '1002':item.feedbackStatus = '已处理'
                   break;
                   default:
                 }
                 item.isNotify = item.isNotify == 'Y' ? '是' : '否';
                 item.gmtCreate = this.switchTime(item.gmtCreate);
                 item.gmtUpdate = this.switchTime(item.gmtUpdate);
                 return item
               })
            } else {
              this.$message.error(res.data.code)
            }
         })
       },
        details (item) {
          this.handleData = {};
          this.dialog = true;
          this.handleData.feedbackId = item.feedbackId
        },
        changeData (data) {
          this.dialog = data;
          this.screenshot = data;
        },
        search () {
          var data = {
            mobile : this.pageData.name,
            feedbackType :this.pageData.type,
            current : '1',
            size : '10',
          }
            this.getfeedbackList(data);
        },
        handSize (val) {
          this.val = val;
          var data = {
            current : val,
            size : '10',
            mobile : this.pageData.name,
            feedbackType :this.pageData.type
          }
          this.getfeedbackList(data);
        },
        submitForm () {
          var data = {
            handleDetail : this.handleData.handleDetail,
            isNotify : this.handleData.isNotify,
            feedbackId :this.handleData.feedbackId,
            remark : this.handleData.remark,
            feedbackStatus : this.handleData.feedbackStatus
          }

            handlefeedback(data).then(res=>{
               if (res.data.code == 'OK') {
                 this.$message.success('处理成功')
                  this.dialog = false;
                  var data = {
                    current : this.val,
                    size : '10',
                    mobile : this.pageData.name,
                    feedbackType :this.pageData.type
                  }
                    this.getfeedbackList(data);

               } else {
                 this.$message.error(res.data.message)
               }
            })
        },
        screenshots (item) {
          this.screenshot = true;
          this.arrImg = item.picture.split(',')
        }
     }
  }
</script>

<style scoped>
.search {
  width: 100%;
  background-color: #fff;
  padding:20px;
  box-sizing: border-box;
  margin-top: 10px;
}
.input {
  /* width: 300px; */
  display: flex;
  flex-wrap: wrap;
}
.input p {
  margin-top: 10px;
}
label {
  line-height: 40px;
  color: #333;
  margin: 0 10px;
  text-align: center;
}
.el-input {
  width:160px;
  height:20px;
}
.add {
  margin-top: 10px;
  padding-left: 14px;
}
.se {
  margin-left: 20px;
}
.el-form-item__content {
  margin-left: 120px !important;
}
.confirm {
  position: absolute;
  bottom: -1px;
  right: 100px;
}
.dels {
  margin-left: 10px;
}
.imglist {
  display: flex;
  align-items: center;
  font-size:20px;
}
.imglist img  {
  width: 200px;
  margin-left: 30px;
  margin-top: 20px;
}
</style>
